const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    //打开地址：http://localhost:8080/myindex.html
    filename: './myindex.html'//指定生成的文件路径，这里把名称改成非index.html，是为了在本地调试时看到根目录的资源，根目录即当前执行命令的根目录,使用run dev编译输出目录是根目录，不是dist
})
//无论devServer路径是否为根目录，以下文件访问地址不改变
//http://localhost:8080/myindex.html
//http://localhost:8080/js/main.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')//解构赋值
const cleanPlugin = new CleanWebpackPlugin()//自动清理dist目录

module.exports={
    mode: "production",//--mode development会覆盖这里的配置
    //devtool: 'eval-source-map',//开发调试阶段，出错后，显示编译前的行数
    devtool: 'nosources-source-map',//编译打包后，出错后，只显示行数，不显示源码，如果要显示源码使用source-map
    plugins: [htmlPlugin,cleanPlugin],
    entry: path.join(__dirname,"/src/index.js"),//入口文件
    output: {
        path: path.join(__dirname,"dist"),
        filename: 'js/main.js'
    },
    devServer:{
        port:8080,
        open:true,
        static: {
            directory: path.join(__dirname, '/'),//默认public，旧版本为根目录
        },
    },
    module:{
        rules:[
            {test:/\.html$/,loader:'html-loader',options:{esModule:false}},
            {test:/\.css$/,use:['style-loader','css-loader']},
            //{test:/\.jpg|png|gif$/,use: 'url-loader?limit=22229&outputPath=image'},//limit是指限制图片大小，小于的进行base64处理，大于的不进行base64处理
            {test:/\.jpg|png|gif$/,use:{
                loader:'url-loader',
                options:{
                    limit: 10,
                    outputPath:'image'//图片打包到dist的image文件夹中
                }
            }},
            {test:/\.js$/,use:'babel-loader',exclude:'/node_modules/'}//这里需要install babel-loader @babel/core @babel/plugin-proposal-decorators
        ]
    },
    resolve:{
        alias:{
            '@':path.join(__dirname,'./src/')//@为src的别名,__dirname表示当前js文件（webpack.config.js）所处的目录
        }
    }
}
